<template>
  <div class="app-container">
    <div class="filter-container">
      <label class=" filter-item radio-label" style="padding-left:0;">日期: </label>
      <el-date-picker
        v-model="dateValue"
        class="filter-item"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        align="right"
        unlink-panels
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        :default-time="['00:00:00', '23:59:59']"
        @change="dateChange"
      />
      <el-button class="filter-item" type="primary" @click="fetchData"> 查询 </el-button>
    </div>
    <el-table
      v-loading="logsLoading"
      :data="logs"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :default-sort="{prop: 'name', order: 'descending'}"
    >
      <el-table-column property="created_at" label="日期" width="200" :formatter="dateFormat" />
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusTypeFilter"> {{ row.status | statusFilter }} </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="10"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getDeviceLogs } from '@/api/device_log'

export default {
  name: 'Log',
  components: { },
  filters: {
    statusTypeFilter(status) {
      if (status === 0) {
        return 'success'
      } else if (status === 1) {
        return 'danger'
      } else {
        return 'warning'
      }
    },
    statusFilter(status) {
      if (status === 0) {
        return '无人'
      } else if (status === 1) {
        return '有人'
      } else {
        return '异常'
      }
    }
  },
  data() {
    return {
      device: null,
      formLabelWidth: '80px',
      logsLoading: false,
      logs: [],
      total: 10,
      fetchForm: {
        device_id: 0,
        start_time: '',
        end_time: '',
        page: 1,
        page_size: 10
      },
      dateValue: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }

    }
  },
  created() {
    this.device = this.$route.query
    this.fetchForm.device_id = this.device.id
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.logsLoading = true
      console.log(this.fetchForm)
      getDeviceLogs(this.fetchForm).then(response => {
        this.logsLoading = false
        this.total = response.data.total
        this.logs = response.data.items
      })
    },
    handleCurrentChange(val) {
      this.fetchForm.page = val
      this.fetchData()
    },
    dateChange() {
      this.fetchForm.start_time = this.dateValue[0]
      this.fetchForm.end_time = this.dateValue[1]
    },
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property]
      return this.$moment(daterc).format('yyyy-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped>
</style>
